<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="a">
    <el-pagination ref="p"
            background page-size="100" current-page="1"
            layout="first, prev, pager, next,last"
            :total="1000"
            :page-sizes="[20,50,100,200]">
    </el-pagination>
</div>
<script>

    Vue.component("el-pagination", {
        props: ["background", "page-size", "current-page", "layout", "total", "page-sizes"],
        template: `
            <div>
               <span class="pager"
               :style="getStyle(0)">共{{total}}页</span>
               <select v-if="pageSizes != undefined"
                    v-model="selectSize" @change="pageSize = selectSize">
                    <option v-for="size in pageSizes" :value="size">{{size}}条/页</option>
               </select>
               <template v-for="l in layouts">
                        <span v-if="l=='first'" class="pager" style="background-color: #eee"
                              @click="curPage = 1">首页</span>
                        <span v-if="l=='prev'" class="pager"
                              :style="getStyle(0)"
                              @click="curPage += (curPage==1?0:-1)">上一页</span>
                        <span v-if="l=='pager'" class="pager" v-for=" p in pages"
                              :style="getStyle(p)"
                              @click="curPage = p">{{p}}</span>
                        <span v-if="l=='next'" class="pager"
                              :style="getStyle(0)"
                              @click="curPage += (curPage==pages?0:1)">下一页</span>
                        <span v-if="l=='last'" class="pager" style="background-color: #eee"
                              @click="curPage=pages">末页</span>
                    </template>


            </div>
        `,
        data() {
            return {
                curPage: 1,
                layouts : [],
                selectSize : 0
            };
        },
        created() {
            this.curPage = parseInt(this.currentPage);
            // 字符串切割数组
            this.layouts = this.layout.split(/\W+/);
            this.selectSize = this.pageSize;
        },
        computed: {
            // 总页数
            pages() {
                let all = this.total / this.pageSize;
                all = Math.floor(all);   // 取整
                if (this.total % this.pageSize != 0){
                    all ++;
                }
                return all;
            }
        },
        methods: {
            getStyle(p) {
                let ret = {backgroundColor: null};
                if (this.background != undefined) {
                    ret.backgroundColor = '#eee';
                }
                if (p == this.curPage) {
                    ret.backgroundColor = '#aaa';
                }
                return ret;
            },

        }
    })

    var v = new Vue({
        el : "#a",
        data : {

        }
    })

</script>

<style>
    .pager {
        display: inline-block;
        text-align: center;
        min-width: 20px;
        padding: 5px;
        margin: 5px;
        border-radius: 3px;
        cursor: pointer;
    }
</style>
</body>
</html>